#userChatBox{
    position: @relative;
}
.chat-container{
    position: @relative;
    width: 100%;
    height: 100%;
    .chat_box{
        overflow:hidden;
        .chat_item{
            padding: 0 1rem 0.4rem 1rem;
            word-wrap:break-word;
            color: #333;
            font-size:1.4rem;
            clear:both;
            margin-top:0.5rem;
            overflow:hidden;
            dt{
                padding-bottom: 0.2rem;
                color: #9D9D9D;
                span:last-child{
                    margin-left:1rem;
                    color:#b2b2b2;
                }
                em.bt{
                    display:inline-block;
                    color: @white;
                    text-align: center;
                    border-radius: 4px;
                    padding:0.2rem 0.5rem 0.1rem 0.5rem;
                    font-size:1.3rem;
                }
                em.emT{
                    background-color: #ff4444;
                }
                em.emZ{
                    background-color: #ffa800;
                }
                em.usr{
                    background-color: #dfdfdf;
                    color:#9D9D9D;
                }
            }
            dd{
                border-radius: 5px;
                padding:0.8rem 0.6rem 0.7rem;
                background-color: @white;
                color:#333;
                margin-top:0.4rem;
                max-width:23rem;
                min-width:3rem;
                text-align: left;
                display:block;
                overflow:hidden;
                float:left;
            }
        }
        .me_item{
            text-align: right;
            overflow: hidden;
            dd{
                float:right;
            }
            dt em.usr{
                margin-left:1rem;
                background-color:#ffa800;
                color:@white;
            }
        }
    }
    .h90{
        height:89%;
    }
    .chat_write_box{
        height: 3.7rem;
        line-height: 3.7rem;
        padding:0.2rem;
        display:@none;
        background-color: @white;
        //width:100%;
        //position: fixed;
        //bottom:0;
        .write_area{
            border:1px solid #f2f2f2;
            padding:0.2rem 0.4rem 0.2rem 0.6rem;
            height: 3rem;
            line-height: 3rem;
            .display;
            .flexs;
            border-radius:25px;
            -moz-border-radius:25px; /* 老的 Firefox */
        }
        .hide_chat_btn{
            background-color: #f2f2f2;
            border-radius: 25px;
            color:#333;
            display: inline-block;
            float: @none;
            height: 3.5rem;
            line-height: 3.5rem;
            margin-right: 0.5rem;
            padding-left: 0;
            width: 5rem;
            text-align: center;
            font-size:1.3rem;
        }
        .chat_txt{
            .flexs;
            height: 2.5rem;
            line-height: 2.5rem;
            border-radius: 3px;
            border: 0;
            font-size:1.3rem;
            color: #333333;
            margin: auto;
            padding:0.1rem 0.2rem;
        }
        .chat_send{
            border:0;
            margin-left:0.5rem;
            margin-top:-0.1rem;
            display: inline-block;
            img{
                width:3rem;
                height:auto;
            }
        }
    }
}
.flexs(@num:1){
    flex:@num;
    -moz-box-flex:@num;
    -webkit-box-flex:@num;
    box-flex:@num;
    -webkit-flex:@num;
}
.chat-box-back{
    height: 3.7rem;
    line-height: 3.7rem;
    padding:0.2rem;
    display:block;
    position:@absolute;
    z-index:-11000;
    top:0;
    background-color:transparent;
}
.errIcon{
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    background-image: url(../../release/images/tanhao.png);
    background-size:1.8rem 1.8rem;
    vertical-align:middle;
    margin-right: 0.5rem;
}
.err_item{
    background-color: @white;
    bottom: -0.2rem;
    color: #b2b2b2 !important;
    padding:0 !important;
    height: 4rem;
    left: 0;
    line-height: 4rem;
    position:@absolute;
    width:100%;
    text-align: center;
}
.mute_box{

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
    box-orient:vertical;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    -moz-box-orient:vertical;

    /* Safari, Chrome, and Opera */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient:vertical;

    .wen1{
        padding-bottom: 1.6rem;
        color: #b2b2b2;
        text-align: center;
        line-height: 1.7rem;
        font-size:1.5rem;
    }
}
.tea_message{
    position: @absolute;
    left:0;
    width:100%;
    height: 2rem;
    line-height: 2rem;
    padding:0.3rem 0.3rem 0.3rem 0.5rem;
    background-color: rgba(110,110,110,0.8);
    color: @white;
    z-index: 1001;
    font-size:1.4rem;
    display: block;
    overflow: hidden;
    white-space:nowrap;
    .marquee{
        position: @relative;
        animation:myfirst 10s linear;
        -webkit-animation:myfirst 10s linear; /* Safari and Chrome */
        animation-delay:1s;
        -webkit-animation-delay:1s;
    }
}
.mid{
    text-align: center;
}
@keyframes myfirst
{
    from  {left:100%;}

    to {left:-30rem;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from  {left:100%;}

    to {left:-30rem;}
}